<template>
  <div>
    <el-form label-width="100px" label-position="left">
      <el-form-item label="扫描件">
        {{ fileUploadUrl1 }}
        <el-upload ref="upload" class="avatar-uploader" :action="fileUploadUrl1" :show-file-list="false"
          :on-error="uploadErr" :on-success="uploadSuccess1" :headers="myHeaders">
          <el-image class="avatar" fit="fill" v-if="image1.FL_SrcPath" :src="fileURL + image1.FL_SrcPath"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="扫描件">
        {{ fileUploadUrl2 }}
        <el-upload ref="upload" class="avatar-uploader" :action="fileUploadUrl2" :show-file-list="false"
          :on-error="uploadErr" :on-success="uploadSuccess" :headers="myHeaders">
          <el-image class="avatar" fit="fill" v-if="image2.FL_SrcPath" :src="fileURL + image2.FL_SrcPath"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  baseURL,
  fileRoot,
  fileUploadRoot,
  empIdName,
  tokenName,
} from '@/config'

export default {
  data: function () {
    return {
      fileURL: baseURL + fileRoot,
      fileUploadUrl1: baseURL + fileUploadRoot,
      fileUploadUrl2: "https://localhost:44332//api/UserApi/Login/UploadSurveyFile",
      myHeaders: {},
      image1: {},
      image2: {},
    }
  },
  methods: {
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    uploadSuccess1(res) {
      if (res.success) {
        let file = res.data
        this.$set(this.image1, 'FL_Name', file.FL_Name)
        this.$set(this.image1, 'FL_SrcPath', file.FL_SrcPath)
        this.$set(this.image1, 'IN_FileID', file.FL_ID)
      } else {
        alert(res.errormsg)
      }
    },
    uploadSuccess2(res) {
      if (res.success) {
        let file = res.data
        this.$set(this.image2, 'FL_Name', file.FL_Name)
        this.$set(this.image2, 'FL_SrcPath', file.FL_SrcPath)
        this.$set(this.image2, 'IN_FileID', file.FL_ID)
      } else {
        alert(res.errormsg)
      }
    },
    uploadErr(err) {
      alert(JSON.stringify(err))
    },
  },
  created: function () {
    this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
  },
}
</script>

<style lang="scss">
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 220px;
  line-height: 220px;
  text-align: center;
  border-style: dashed;
  border-width: thin;
}

.avatar {
  width: 300px;
  height: 220px;
  display: block;
  border-style: dashed;
  border-width: thin;
}
</style>
